<template>
  <view class="product">
    <view class="product-content">
      <v-image
        height="190rpx"
        width="190rpx"
        :src="product.sku_image"
        mode="aspectFill"
      />
      <view class="product-info">
        <view class="name">
          {{ product.spu_name }}
        </view>
        <view class="spec-info">
          {{ product.sku?.spec_info?.map((item) => item.value).join('; ') }}
        </view>
        <view class="footer">
          <v-price
            size="32rpx"
            color="#333333"
            :price="product.sell_price"
          />
          <view class="quantity">
            {{ product.quantity ? `x${product.quantity}` : '' }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  product: OrderDetailVO;
}>();

const product = toRef(props, 'product');
</script>

<style lang="scss" scoped>
.product {
  margin: 0 24rpx 20rpx;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12rpx;
  .product-content {
    display: flex;
    align-items: stretch;
    .product-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      margin-left: 24rpx;
      .name {
        font-weight: bold;
        margin-bottom: 12rpx;
      }
      .spec-info {
        flex: 1;
        min-height: 0;
        margin-bottom: 20rpx;
        font-size: 24rpx;
        color: #666666;
      }
      .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .quantity {
          color: #999999;
        }
      }
    }
  }
}
</style>
